<template>
  <div class="app-container">

    <div>
      <!-- ref可以引用组件，可以拿到组件对象，从而获取调用组件身上暴露（Exposes）的方法 -->
      <el-input ref="liminInput" v-model="content" style="width: 100px;" />
      <button @click="$refs.liminInput.clear()">清空</button>
      <button @click="handler">获取焦点</button>
    </div>

    <el-input style="width: 400px;" v-model="content">

      <template #prepend>
        Http://
      </template>

    </el-input>

    <hr>
    <el-input class="my-input" v-model="content" :disabled="flag" style="width: 440px" placeholder="请输入" maxlength="10"
      show-word-limit clearable @focus="focusHandler" @clear="clearHandler" />
    <div>你输入内容：{{ content }}</div>
    <button @click=" flag = !flag">切换可用不可用</button>

  </div>
</template>

<script setup>
import { ref, useTemplateRef } from 'vue'
const flag = ref(false)
const content = ref('')

// 引用组件
const inputInstance = useTemplateRef('liminInput')

const focusHandler = (event) => {
  console.log('获取焦点')
}

const clearHandler = () => {
  console.log('清空了')
}

const handler = () => {
  // 组件实例对象获取其身上暴露的focus方法
  inputInstance.value.focus()
}
</script>

<style lang="scss" scoped>
.app-container {
  .my-input {
    height: 50px;
  }
}
</style>